<!-- src/components/AppFooter.vue -->
<template>
    <footer class="app-footer">
      <div 
        class="footer-tab" 
        :class="{ 'active': activeTab === 'home' }"
        @click="$emit('tab-change', 'home')"
      >
        <van-icon name="home-o" size="20" />
        <span>主页</span>
      </div>
      <div 
        class="footer-tab" 
        :class="{ 'active': activeTab === 'profile' }"
        @click="$emit('tab-change', 'profile')"
      >
        <van-icon name="user-o" size="20" />
        <span>个人信息</span>
      </div>
    </footer>
  </template>
  
  <script setup>
  import { Icon as VanIcon } from 'vant'
  import { computed } from 'vue'
  import { useRoute } from 'vue-router'
  
  const route = useRoute()
  
  const activeTab = computed(() => {
    return route.path === '/profile' ? 'profile' : 'home'
  })
  </script>
  
  <style scoped>
  .app-footer {
    background-color: var(--van-background-2);
    height: 56px;
    display: flex;
    border-top: 1px solid var(--van-border-color);
  }
  
  .footer-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--van-text-color-2);
    cursor: pointer;
    font-size: 12px;
    gap: 4px;
  }
  
  .footer-tab.active {
    color: var(--van-primary);
  }
  </style>